<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .section {
        width: 700px;
        min-height: 370px;
        background: #fff;
        margin: 0 auto;
        margin-top: 30px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      img {
        display: block;
        width: 160px;
        height: 42px;
        margin: 0 auto;
        margin-top: 60px;
      }
      .title {
        width: 660px;
        height: 30px;
        font-family: HYQiHei-FZS;
        font-size: 22px;
        color: #000;
        text-align: center;
        margin-top: 40px;
      }
      .copyright{
          width: auto;
          margin-top: 100px;
          text-align: center;
          font-size: 10px;
      }
      *{
        margin: 0;
        padding: 0;
      }
      p{
        display: none;
        color: red;
      }
      .login{
        margin-left: 50px;
      }
    </style>
    <script src="./php/ajax.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div class="section">
      <img src="./img/1.png" alt="" />
      <div class="title">账号注册</div>
      <br />
      <div>姓&nbsp;&nbsp;&nbsp;&nbsp;名：<input type="text" class="username" name="username" /></div><p>姓名不符合规则</p>
      <br />
      <div>密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="text" class="pwd" name="pwd" /></div><p>密码不符合规则</p>
      <br />
      <div>邮&nbsp;&nbsp;&nbsp;&nbsp;箱：<input type="text" class="email" name="email" /></div><p>邮箱不符合规则</p>
      <br />
      <div>身份证：<input type="text" class="ID" name="ID" /></div><p>身份证不符合规则</p>
      <br />
      <div>手机号：<input type="text" class="phone" name="phone" /></div><p>手机号不符合规则</p>
      <br />
      <div><input type="submit" value="已有账号" id="center">
        <input type="submit" class="login" value="立即注册" /></div>
      
    </div>
    <div class="copyright">
        COPYRIGHT ©2011-2021 广东天宸网络科技有限公司 版权所有 保留一切权利 | 隐私政策 | 法律声明 | 粤B2-20080267 | 粤ICP备05100288号 
    </div>
    <script>
        let pEle = document.querySelectorAll("p")
        //1.姓名  中文要2-4位；[\u4e00-\u9fa5]  匹配中文字符
        var usernameEle=document.querySelector(".username")
        usernameEle.onblur=function(){
        var reg=/^[\u4e00-\u9fa5]{2,4}$/g
        var val = this.value;
            if(!reg.test(val)){
              pEle[0].style.display="block"
                // alert("姓名不符合规则")
            }else{
              pEle[0].style.display="none"
            }
        }
        // 身份证 ：18位  最后一位可以是X
        var idEle=document.querySelector(".ID")
        idEle.onblur=function(){
            var reg=/^[1-9]\d{16}(\d|X)$/g
            var val = this.value;
            if(!reg.test(val)){
              pEle[3].style.display="block"
            }else{
              pEle[3].style.display="none"
            }
        }
        // 邮箱验证
        var emailEle=document.querySelector(".email")
       
        emailEle.onblur=function(){
            var reg=/^\w+@\w+((\.\w{3})|(\.\w{3}\.\w{2}))$/g
            var val = this.value;
            if(!reg.test(val)){
              pEle[2].style.display="block"
            }else{
              pEle[2].style.display="none"
            }
        }
        //手机号：1开头 中间3456789  总11位
        var phoneEle=document.querySelector(".phone")
        
        phoneEle.onblur=function(){
            var reg=/^1[3-9]\d{9}$/g
            var val = this.value;
            if(!reg.test(val)){
              pEle[4].style.display="block"
            }else{
              pEle[4].style.display="none"
            }
        }
        //密码强度校验
        var pwdEle=document.querySelector(".pwd")
        pwdEle.onblur=function(){
            var val = this.value;
            if(val.length>=8){
                var reg1=/(^\d+$)|(^[a-zA-Z]+$)/
                if(reg1.test(val)){
                  pEle[1].style.display="block"
                    pEle[1].innerHTML="密码强度低"
                }else{
                    var reg2=/\d/
                    var reg3=/[a-zA-Z]/
                    var reg4=/[A-Z]/
                    var reg5=/_/
                    if(reg2.test(val) && reg3.test(val) && reg4.test(val) && reg5.test(val)){
                        
                        pEle[1].innerHTML="密码强度强"
                    }else{
                        if(reg2.test(val) && reg3.test(val)){
                          
                            pEle[1].innerHTML="密码强度中"
                        }
                    }
                }
            }else{
              pEle[1].style.display="block"
              pEle[1].innerHTML="密码长度不得低于八位"
            }
        }
        
        let loginEle=document.querySelector(".login")
        loginEle.onclick=function(){
          let username=usernameEle.value;
        let pwd=pwdEle.value;
        
          ajax({
          url:"php/login.php",
          method:"post",
          data:{
            username,
            pwd
          },
          dataType:"json",
      }).then(res=>{
        if(res.status==1){
          console.log(res.info)
          window.location.href="centers.html";
        }else{
          console.log(res.info)
        }
      })
        }
        let centerEle = document.querySelector("#center");
        centerEle.onclick=function(){
          window.location.href="centers.html";
        }
    </script>
  </body>
</html>
